<template>
    <div v-if="show" class="discountPopup">
        <div class="popup">
            <img
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/discountPopup.png"
                class="center"
                alt=""
            />
            <div class="num">{{ num }}</div>
            <div class="kxsx" @click="close"></div>
            <div class="close">
                <i class="el-icon-close" @click="close"></i>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { get_userdiscount_coupons } from "@/assets/api/userCenterApi.js";
export default {
    name: "discountPopup",
    props: {},
    data() {
        return {
            show: false,
            num: 0,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        if (
            !localStorage.getItem("is_show_userdiscountcoupons")
        )
            this.getUserInfo2().then((user) => {
                if (user) {
                    if (user.is_show_userdiscountcoupons == 1)
                        this.getCoupons();
                    else this.show = false;
                }
            });
    },
    methods: {
        ...mapActions("common", ["getUserInfo2"]),
        async getCoupons() {
            const res = await get_userdiscount_coupons({});
            if (res.code == 1) {
                this.show = true;
                this.num = Number(res.data[0].num) * 10;
            }
        },

        close() {
            localStorage.setItem("is_show_userdiscountcoupons", '1');
            this.show = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.discountPopup {
    background-color: rgba($color: #000000, $alpha: 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.popup {
    width: 550px;
    height: 542px;
    position: relative;
    .center {
        width: 550px;
        height: 542px;
    }
    .num {
        position: absolute;
        color: #ffffff;
        right: 400px;
        top: 266px;
        font-size: 56px;
        font-family: fantasy;
    }
    .kxsx {
        width: 356px;
        height: 77px;
        position: absolute;
        left: 92px;
        top: 408px;
        cursor: pointer;
    }
    .close {
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: -46px;
        .el-icon-close {
            font-size: 40px;
            color: #ffffff;
            cursor: pointer;
        }
    }
}
</style>
